<template>
  <el-container v-loading="loading" class="post-article">
    <el-main class="main">
      <!--     4个 折线图-->
      <div>
        <!--      <v-charts class="chart" :option="options" style="width: 800px; height: 400px;float: left;"/>-->
        <div id="main1" style="width: 800px; height: 400px;float: left;" ref="chart1"></div>
        <div id="main2" style="width: 800px; height: 400px;float: left;" ref="chart2"></div>
        <div id="main3" style="width: 800px; height: 400px;float: left;margin-top: 50px;" ref="chart3"></div>
        <div id="main4" style="width: 800px; height: 400px;float: left;margin-top: 50px;" ref="chart4"></div>
      </div>
<!--        <div>-->
<!--        <div ref="chart" class="eChart"></div>-->
<!--        <div v-loading="loading">-->
<!--          <div style="margin-top: 10px;display: flex;justify-content: center">-->
<!--            <el-input-->
<!--              placeholder="默认展示部分用户，可以通过用户名搜索用户..."-->
<!--              prefix-icon="el-icon-search"-->
<!--              v-model="keywords" style="width: 400px" size="small">-->
<!--            </el-input>-->
<!--            <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 3px" @click="searchClick">搜索-->
<!--            </el-button>-->
<!--          <div style="display: flex;justify-content: space-around;flex-wrap: wrap">-->
<!--            <el-card style="width:330px;margin-top: 10px;" v-for="(user,index) in users" :key="index"-->
<!--                     v-loading="cardloading[index]">-->
<!--        -->
<!--              <div slot="header" style="text-align: left">-->
<!--                <span>{{user.nickname}}</span>-->
<!--                <el-button style="float: right; padding: 3px 0;color: #ff0509" type="text" icon="el-icon-delete"-->
<!--                           @click="deleteUser(user.id)">删除-->
<!--                </el-button>-->
<!--              </div>-->
<!--              <div>-->
<!--                <div><img :src="user.userface" :alt="user.nickname" style="width: 70px;height: 70px"></div>-->
<!--                <div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">-->
<!--                  <span>用户名:</span><span>{{user.username}}</span>-->
<!--                </div>-->
<!--                <div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">-->
<!--                  <span>电子邮箱:</span><span>{{user.email}}</span>-->
<!--                </div>-->
<!--                <div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">-->
<!--                  <span>注册时间:</span><span>{{user.regTime | formatDateTime}}</span>-->
<!--                </div>-->
<!--                <div-->
<!--                  style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px;display: flex;align-items: center">-->
<!--                  <span>用户状态:</span>-->
<!--                  <el-switch-->
<!--                    v-model="user.enabled"-->
<!--                    active-text="启用"-->
<!--                    active-color="#13ce66"-->
<!--                    @change="enabledChange(user.enabled,user.id,index)"-->
<!--                    inactive-text="禁用" style="font-size: 12px">-->
<!--                  </el-switch>-->
<!--                </div>-->
<!--                <div style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px">-->
<!--                  <span>用户角色:</span>-->
<!--                  <el-tag-->
<!--                    v-for="role in user.roles"-->
<!--                    :key="role.id"-->
<!--                    size="mini"-->
<!--                    style="margin-right: 8px"-->
<!--                    type="success">-->
<!--                    {{role.name}}-->
<!--                  </el-tag>-->
<!--                  <el-popover-->
<!--                    placement="right"-->
<!--                    title="角色列表"-->
<!--                    width="200"-->
<!--                    :key="index+''+user.id"-->
<!--                    @hide="saveRoles(user.id,index)"-->
<!--                    trigger="click" v-loading="eploading[index]">-->
<!--                    <el-select v-model="roles" :key="user.id" multiple placeholder="请选择" size="mini">-->
<!--                      <el-option-->
<!--                        v-for="(item,index) in allRoles"-->
<!--                        :key="user.id+'-'+item.id"-->
<!--                        :label="item.name"-->
<!--                        :value="item.id">-->
<!--                      </el-option>-->
<!--                    </el-select>-->
<!--                    <el-button type="text" icon="el-icon-more" style="padding-top: 0px" slot="reference"-->
<!--                               @click="showRole(user.roles,user.id,index)"></el-button>-->
<!--                  </el-popover>-->
<!--                </div>-->
<!--              </div>-->
<!--            </el-card>-->
<!--          </div>-->
<!--          </div>-->
      <!--  </div>-->
    </el-main>
  </el-container>
</template>
<script>
  import {getRequest} from '../utils/api'
  import {putRequest} from '../utils/api'
  import {deleteRequest} from '../utils/api'
  // import { postRequest, getRequest } from "../../network/index";
  import * as echarts from "echarts";
  export default{
    mounted: function () {
      getRequest("/system/prediction/showHistory").then(resp=> {
        if (resp.status == 200) {
          this.reverseTime = resp.data.reverse();
          this.m1 = this.reverseTime[1];
          this.m2 = this.reverseTime[4];
          this.m3 = this.reverseTime[7];
          this.m4 = this.reverseTime[10];
          if(this.reverseTime[0]!=null) {
            for (let i = 0; i < this.reverseTime[0].length; i++) {
              this.data1.push(this.reverseTime[0][i][0]);
            }
          }
          if(this.reverseTime[0]!=null) {
            for (let i = 0; i < this.reverseTime[0].length; i++) {
              this.data2.push(this.reverseTime[0][i][1]);
            }
          }
          if(this.reverseTime[3]!=null) {
            for (let i = 0; i < this.reverseTime[3].length; i++) {
              this.data3.push(this.reverseTime[3][i][0]);
            }
          }
          if(this.reverseTime[3]!=null) {
            for (let i = 0; i < this.reverseTime[3].length; i++) {
              this.data4.push(this.reverseTime[3][i][1]);
            }
          }
          if(this.reverseTime[6]!=null) {
            for (let i = 0; i < this.reverseTime[6].length; i++) {
              this.data5.push(this.reverseTime[6][i][0]);
            }
          }
          if(this.reverseTime[6]!=null) {
            for (let i = 0; i < this.reverseTime[6].length; i++) {
              this.data6.push(this.reverseTime[6][i][1]);
            }
          }
          if (this.reverseTime[9]!= null) {
          for (let i = 0; i < this.reverseTime[9].length; i++) {
            this.data7.push(this.reverseTime[9][i][0]);
          }
        }
          if (this.reverseTime[9]!= null) {
            for (let i = 0; i < this.reverseTime[9].length; i++) {
              this.data8.push(this.reverseTime[9][i][1]);
            }
          }
          this.initCharts1();
          this.initCharts2();
          this.initCharts3();
          this.initCharts4();
        } else {
          this.$message({type: 'error', message: '数据加载失败!'});
        }
      }, resp=> {
        _this.$message({type: 'error', message: '数据加载失败!'});
      });
    },
    methods: {
      initCharts1 () {
        let myChart = this.$echarts.init(this.$refs.chart1);
        console.log(this.$refs.chart1)
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: [this.m1+'浓度值mol/L'],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.data1,
          },
            yAxis: {
            type: "value",
          },
          series: [
            {
              name: this.m1+'浓度值mol/L',
              type: "line",
              stack: "总量",
              data:this.data2,
            },
          ],
        });
        },
      initCharts2 () {// 折线图2方法
        let myChart = this.$echarts.init(this.$refs.chart2);
        console.log(this.$refs.chart2)
        myChart.setOption({
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: [this.m2+'浓度值mol/L'],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.data3,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: this.m2+'浓度值mol/L',
              type: "line",
              stack: "总量",
              data:this.data4,
            },
          ],
        });
      },
      initCharts3 () {// 折线图3方法
        let myChart = this.$echarts.init(this.$refs.chart3);
        console.log(this.$refs.chart3)
        myChart.setOption({
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: [this.m3+'浓度值mol/L'],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.data5,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: this.m3+'浓度值mol/L',
              type: "line",
              stack: "总量",
              data:this.data6,
            },
          ],
        });
      },
      initCharts4 () { // 折线图4方法
        let myChart = this.$echarts.init(this.$refs.chart4);
        console.log(this.$refs.chart4)
        myChart.setOption({
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: [this.m4+'浓度值mol/L'],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.data7,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: this.m4+'浓度值mol/L',
              type: "line",
              stack: "总量",
              data:this.data8,
            },
          ],
        });
      },
    },
    watch: {
      "$route.query.channel"(newVal, oldVal) {
        this.getData(newVal);
      },
    },
    data(){
      return {
        loading: false,
        eploading: [],
        cardloading: [],
        keywords: '',
        users: [],
        allRoles: [],
        roles: [],
        cpRoles: [],
        m1:'',
        m2:'',
        m3:'',
        m4:'',
        charts: "",
        reverseTime: [],//折线图数据时间
        data7:[],
        data8:[],
        data5:[],
        data6:[],
        data1 : [],
        data2 : [],
        data3 : [],
        data4 : [],
      };
    },
  };
</script>
